import mesop as me

@me.stateclass
class State:
    left_text: str
    right_text: str

def update_left_text(e: me.InputEvent):
    state = me.state(State)
    state.left_text = e.value

def update_right_text(e: me.InputEvent):
    state = me.state(State)
    state.right_text = e.value

@me.page()
def text_page():
    state = me.state(State)

    with me.box(style=me.Style(display="flex", flex_direction="column", min_height="100vh", background=me.theme_var("background"))):
        # Header
        with me.box(style=me.Style(padding=me.Padding.all(16), background=me.theme_var("primary"))):
            me.text("Side-by-Side Textboxes", type="headline-4", style=me.Style(color=me.theme_var("on-primary"), text_align="center"))

        # Main content
        with me.box(style=me.Style(display="flex", flex_grow=1, padding=me.Padding.all(16), gap=16)):
            # Left textbox
            with me.box(style=me.Style(flex_grow=1, display="flex", flex_direction="column", gap=8)):
                me.text("Left Textbox", type="subtitle-1", style=me.Style(color=me.theme_var("on-surface")))
                me.textarea(
                    value=state.left_text,
                    on_input=update_left_text,
                    style=me.Style(
                        flex_grow=1,
                        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
                        border_radius=4,
                        padding=me.Padding.all(8)
                    )
                )

            # Right textbox
            with me.box(style=me.Style(flex_grow=1, display="flex", flex_direction="column", gap=8)):
                me.text("Right Textbox", type="subtitle-1", style=me.Style(color=me.theme_var("on-surface")))
                me.textarea(
                    value=state.right_text,
                    on_input=update_right_text,
                    style=me.Style(
                        flex_grow=1,
                        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
                        border_radius=4,
                        padding=me.Padding.all(8)
                    )
                )